import React, {useEffect} from 'react'
import { NavBar, List, Button,Toast } from 'antd-mobile';
import "./UserCenter.less";
import axios from 'axios';

export default function UserCenter(props) {
  //
  useEffect(() => {
    async function fn(){
      //发送 AJAX 请求
      let result = await axios.post('/login/verify');
      setUser(result.data.data)
    }
    fn();
  }, []);

  //设置状态
  let [user, setUser] = React.useState({});

  //声明函数
  let logout = async () => {
    let result = await axios.post('/logout', {_id: user._id});
    if(result.data.code === 20000){
      //提示
      Toast.show({
        icon: 'success',
        content: '退出成功'
      });
      //跳转到登录页面
      props.history.push('/login');
    }else{
      Toast.show({
        icon: 'fail',
        content: '退出失败'
      });
    }
  }

  return (
      <div className="user-container">
          {/* 顶部导航 start */}
          <NavBar back={null}>个人中心</NavBar>
          {/* 顶部导航 end */}

          {/* 图片显示区域 start */}
          <div className="profile">
            <img src={user.avatar} alt="" />
            <p>欢迎用户 {user.username}</p>
          </div>
          {/* 图片显示区域 end */}

          {/* 个人信息 start */}
          <List>
            <List.Item> <span>昵称</span><span>{user.nickName}</span></List.Item>
            <List.Item> <span>手机</span><span>{user.phone}</span></List.Item>
          </List>
          {/* 个人信息 end */}
          <div className="h-20"></div>
          <div className="h-20"></div>
          <Button color="danger" block size="large" onClick={logout}>退出登录</Button>
      </div>
  )
}
